<template>
    <div class="heaven-news">
      <div class="title-row">
        <h3 class="title">今生永恒资讯</h3>
        <span class="more"  @click="goToArticle(3)">更多</span>
      </div>
  
      <!-- 顶部封面新闻 -->
      <div class="top-news">
        <!-- <img class="thumb" src="/path/to/image.jpg" alt="资讯封面" /> -->
        <div class="news-content">
          <div class="news-title">
            《殡葬绿皮书2014~2015》网络祭祀发展趋势...
          </div>
          <div class="news-meta">
            2015年3月25日 《殡葬绿皮书》
          </div>
        </div>
      </div>
  
      <!-- 资讯列表 -->
      <ul class="news-list">
        <li v-for="(item, index) in newList" :key="item.id" @click="handleItemClick(item, 3)">
          <span class="text">{{ item.title }}</span>
        </li>
      </ul>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, defineProps } from 'vue'
  import { useRouter } from 'vue-router'
  defineProps({
    newList: {
      type: Array,
      default: []
    },
  })
  const router = useRouter();

  const handleItemClick = async (item: any, type: number) => {
    console.log(item, type);
    router.push('/article?pid=' + type + '&id=' + item.id)
    
  }

  const goToArticle = (type: number) => {
    router.push('/article?pid=' + type)
  }
  </script>
  
  <style scoped>
  .heaven-news {
    /* background-color: #f9f9f5; */
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
    color: #333;
  }
  
  .title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .title {
    font-size: 18px;
    font-weight: normal;
    color: #555;
  }
 
  
  .more {
    font-size: 13px;
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  
  .top-news {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
  }
  
  .thumb {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #ccc;
  }
  
  .news-content {
    flex: 1;
  }
  
  .news-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #333;
  }
  
  .news-meta {
    font-size: 12px;
    color: #888;
    margin-top: 6px;
  }
  
  .news-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .news-list li {
    margin-bottom: 6px;
    font-size: 14px;
  }
  
  .news-list a {
    color: #333;
    text-decoration: none;
  }
  
  .news-list .text:hover {
    color: #0077cc;
  }

  .text{
    cursor: pointer;
  }
  </style>
  